<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出入库管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        body .el-table th.gutter {
            display: table-cell !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form label-width="80px" :inline="true" >
                <span>出/入库单号:</span>
                <el-form-item label="">
                    <el-input placeholder="请输入出/入库单号" ></el-input>
                </el-form-item>
                <span>批次:</span>
                <el-form-item label="">
                    <el-input placeholder="请输入批次号" ></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" >搜索</el-button>
            </el-form>
            <el-button type="primary" icon="el-icon-plus">出库添加</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addInWarehouse">入库添加</el-button>
        </el-header>
    </el-container>
    <!--入库添加-->
    <el-dialog title="添加入库单" :visible.sync="AddInWarehouseVisible" width="85%">
        <el-form label-width="150px" ref="addInWarehouseForm" :model="addInWarehouseForm">
            <el-form-item label="入库单号：" prop="inWareNum" >
                <el-input v-model="addInWarehouseForm.ioNo" ></el-input>
            </el-form-item>
            <el-form-item label="入库类型：" prop="inWareType" >
                <el-select v-model="selectProductHandoverTypeValue" clearable placeholder="请选择入库类型" @change="selectProductHandoverTypeChang(selectProductHandoverTypeValue)">
                    <el-option
                            v-for="item in selectProductHandoverType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次：" prop="inWareBatch" >
                <el-input v-model="addInWarehouseForm.batch" ></el-input>
            </el-form-item>
            <el-form-item label="入库时间：" prop="inWareTime" >
                <div class="block">
                    <el-date-picker
                            v-model="addInWarehouseForm.ioTime"
                            type="datetime"
                            placeholder="选择日期"
                            format="yyyy-MM-dd "
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-table
                    ref="addInWarehouseTable"
                    :data="addInWarehouseTable"
                    border
                    v-if="addInWarehouseTable"
                    @current-change="addInWarehouseTableCurrent"
                    style="width:100%;margin-top: 10px">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="产品码">
                    <template slot-scope="scope">
                        <span >{{scope.row.productNumber}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.productName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库库名" >
                    <template slot-scope="scope">
                        <span >{{scope.row.wareName}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="入库区域" width="150px">
                     <template slot-scope="scope">
                         <el-select v-model="scope.row.selectInWarehouseCargoArea"  placeholder="请选择库区"
                                    @change="selectAddInWarehouseCargoArea(scope.row,scope.row.selectInWarehouseCargoArea)" >
                             <el-option
                                     v-for="item in addInWarehouseTable[scope.$index].cargoAreaList"
                                     :key="item.goodsNo"
                                     :label="item.goodsName"
                                     :value="item.goodsNo">
                             </el-option>
                         </el-select>
                     </template>
                 </el-table-column>
                <el-table-column label="入库货架"  width="150px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.selectInWarehouseShelves" placeholder="请选择货架" @change="selectAddInWarehouseShelves(scope.row,scope.row.selectInWarehouseShelves)" >
                            <el-option
                                    v-for="item in addInWarehouseShelvesList"
                                    :key="item.shelvesNo"
                                    :label="item.shelvesNo"
                                    :value="item.shelvesNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="入库货位" width="150px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.selectInWarehouseCargo" placeholder="请选择货位"  @change="selectAddInWarehouseCargo(scope.row.selectInWarehouseCargo)"   >
                            <el-option
                                    v-for="item in addInWarehouseCargoList"
                                    :key="item.cargoNo"
                                    :label="item.cargoNo"
                                    :value="item.cargoId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120px" >
                    <template slot-scope="scope" >
                        <el-button type="info" disabled v-if="scope.row.isInWareStatus==0" >未确认</el-button>
                        <el-button type="success" disabled  v-if="scope.row.isInWareStatus==1" >已移库</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="确认入库" width="120px" >
                    < <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-check" v-if="scope.row.isInWareStatus==0" @click="confirmStorage(scope.$index,scope.row)"></el-button>
                    <el-button type="info" icon="el-icon-check" disabled  v-if="scope.row.isInWareStatus==1" ></el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-form-item>
                <el-button type="primary" @click="addIomWarehouseSubmitForm('addInWarehouseForm')">保存</el-button>
                <el-button @click="addIomWarehouseResetForm('addInWarehouseForm')">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
</body>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                //入库添加弹框状态
                AddInWarehouseVisible:false,
                //入库添加表单数据
                addInWarehouseForm:{
                    ioNo:'',
                    ioType:'',
                    batch:'',
                    pName:'',
                    pNum:'',
                    wName:'',
                    ioTime:''
                },
                //时间
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                //选择入库类型
                selectProductHandoverType: [{
                    value: '0',
                    label: '销售订单'
                }, {
                    value: '1',
                    label: '采购订单'
                }],
                selectProductHandoverTypeValue:'',
                //添加入库表格
                addInWarehouseTable:'',
                //当前行
                inWarehouseTableCurrent:'',
                //对应货区的货架
                addInWarehouseShelvesList:'',
                //对应货区的货位
                addInWarehouseCargoList:'',
                //货位id
                cargoId:'',
                //出入库详情
                addIomWarehouse:{
                    id:'',
                    iomGoodsno:'',
                    iomGoods:'',
                    iomName:'',
                    iomArea:'',
                    iomShelves:'',
                    iomCargoloca:'',
                    iomNo:'',
                    cargoId:''//货位id
                }
            }
        },
        methods: {
            addInWarehouse(){
                /*获得交接单的所有商品*/
                axios.get("/inWarehouse-productHandover").then(value => {
                    if (value.data.code == 1) {
                        this.$nextTick(()=>{
                            //赋值
                            this.addInWarehouseTable=value.data.data
                            console.log(this.addInWarehouseTable);
                        })
                        this.AddInWarehouseVisible=true
                    }
                });

            },
            //根据入库类型得到要入库的商品
            selectProductHandoverTypeChang(val){
                axios.get("/inWarehouse-productHandover-type/"+val).then(value => {
                    if (value.data.code == 1) {
                        this.$nextTick(()=>{
                            //赋值
                            this.addInWarehouseTable=value.data.data
                        })
                    }
                });
            },
            //当点击当前行，获得当前行的数据
            addInWarehouseTableCurrent(row){
                this.inWarehouseTableCurrent=row
            },
            //入库区域选中时的变化
            selectAddInWarehouseCargoArea(row,val){
                //清空选中的货架值
                 row.selectInWarehouseShelves=null
                //清空选中的货位值
                row.selectInWarehouseCargo=null
                var shelves=row.cargoAreaList
                for (let i = 0; i < shelves.length ; i++) {
                    if (shelves[i].goodsNo==val){
                        //获得对应的货架
                        this.addInWarehouseShelvesList=shelves[i].shelvesList;
                        break
                    }else {
                        this.$message("该货区不存在货架");
                    }
                }
            },
            //货架选中时的变化
            selectAddInWarehouseShelves(row,val){
                //清空选中的货位值
                row.selectInWarehouseCargo=null
                var cargoAreaList=row.cargoAreaList
                for (let i = 0; i < cargoAreaList.length; i++) {
                    //找到当前行的货区
                    if (cargoAreaList[i].goodsNo==row.selectInWarehouseCargoArea){
                        //找到当前所选择的货架
                        var shelvesList=cargoAreaList[i].shelvesList;
                        for (let j = 0; j < shelvesList.length; j++) {
                            if (shelvesList[j].shelvesNo==row.selectInWarehouseShelves){
                                //获得对应的货位
                                this.addInWarehouseCargoList=shelvesList[j].cargoList
                                break;
                            }
                        }
                    }
                    break;
                }
            },
            //货位选中时的值
            selectAddInWarehouseCargo(val){
                //获得货位表的id
                this.cargoId=val
            },
            //确认入库
            confirmStorage(index,row) {
                if (this.addInWarehouseForm.ioNo==null||this.addInWarehouseForm.ioNo===''){
                    this.$message("未填写入库单号！")
                    return;
                }
                if (this.addInWarehouseForm.batch==null||this.addInWarehouseForm.batch===''){
                    this.$message("未填写入库单号！")
                    return;
                }
                this.addIomWarehouse.iomGoodsno=row.productNumber;
                this.addIomWarehouse.iomGoods=row.productName;
                this.addIomWarehouse.iomName=row.wareName;
                this.addIomWarehouse.iomArea=row.selectInWarehouseCargoArea;
                this.addIomWarehouse.iomShelves=row.selectInWarehouseShelves;
                this.addIomWarehouse.iomCargoloca=row.selectInWarehouseCargo;
                this.addIomWarehouse.iomNo =  this.addInWarehouseForm.ioNo
                //判断是否选择入库类型
                if (this.selectProductHandoverTypeValue==null||this.selectProductHandoverTypeValue===''){
                    this.$message("未选择入库类型！")
                    return;
                }else {
                    this.$confirm('确认要移库吗？', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //添加入库信息
                        axios.put("/inWarehouse-iomWarehouse-inWare/",this.addIomWarehouse).then(value => {
                            if (value.data.code == 1) {
                                this.iomWarehouse = value.data.data;
                                this.$nextTick(()=>{
                                    row.isInWareStatus=1
                                })
                                //赋值
                                this.addInWarehouseForm.pName=row.productName
                                this.addInWarehouseForm.wName=row.wareName
                                this.addInWarehouseForm.pNum=row.num
                                for (let i = 0; i < this.selectProductHandoverType.length; i++) {
                                    if (this.selectProductHandoverType[i].value==this.selectProductHandoverTypeValue){
                                        this.addInWarehouseForm.ioType=this.selectProductHandoverType[i].label
                                    }
                                }
                                this.$message({
                                    type: 'success',
                                    message: '移库成功!'
                                });
                            }
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消移库'
                        });
                    });
                }
            },
            //新增入库信息
            addIomWarehouseSubmitForm(val){
                axios.post("/inWarehouse-inWare/",this.addInWarehouseForm).then(value => {
                    if (value.data.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.$refs[val].resetFields();
                        this.AddInWarehouseVisible=false
                    }
                });

            },
            addIomWarehouseResetForm(val){
                this.$refs[val].resetFields();
                this.AddInWarehouseVisible=false
            }
        },
        mounted(){

        }
    })
</script>
</html>